<template>
<!--  多组计算第一个铀浓度图-->
  <div>
    <div ref="chart" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

export default {
  props: {
    caculateResult: {
      type: Array,
      default: function () {
        return [];
      },
    },
    Argument:{
      type:String,
      default:""
    },
    Legend:{
      type:Array,
      default: function () {
        return [];
      },
    },
  },
  setup(props) {
    const chart = ref(null);

    onMounted(() => {
      const chartInstance = echarts.init(chart.value);

      const seriesData = [];
      let longestTimeData = []; // 存储最长的时间数据
      let i =0;
      for (const result of props.caculateResult) {
        const yData = result.data;

        const seriesItem = {
          name: `${props.Argument}-${props.Legend[i]}`, //
          type: "line",
          data: yData,
          label: {
            formatter: "{c0}",
          },
          symbol: "none",
        };

        seriesData.push(seriesItem);
        i++;
        if (result.t.length > longestTimeData.length) {
          // console.log('result.t',result.t)
          let arry1 = []
          result.t.forEach((value,index)=>{
            arry1[index] = ( value )

          })
          longestTimeData =arry1 ;
        }
      }

      const option = {

        tooltip: {
          trigger: "axis",
          // formatter: "铀浓度：{c0} (g·L^-1)",
          formatter: function(params) {
            var tooltipText = '时间：' + params[0].name + 'min' + '<br>'; // 初始化提示框文本
            // 遍历数据项，添加系列名称、颜色和数据项名称
            for (var i = 0; i < params.length; i++) {
              var seriesName = params[i].seriesName; // 获取系列名称
              var color = params[i].color; // 获取数据项颜色
              var dataName = params[i].value; // 获取数据项名称
              tooltipText += '<span style="color:' + color + '">&#9679;</span> ' + seriesName + ' : ' + dataName + '<br>';
            }
            return tooltipText;
          },
          // formatter: function(params) {
          //   var result = '';
          //   for (var i = 0; i < params.length; i++) {
          //     result += '溶解第: ' + params[i].name +' min' + '<br />';
          //     result += '铀浓度 : ' + params[i].value + ' g·L^-1' + '<br />';
          //   }
          //   return result;
          // },
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: '#fff', // 悬浮框背景色
          borderColor: '#409EFF', // 悬浮框边框颜色
          borderWidth: 1, // 悬浮框边框宽度
          textStyle: { // 悬浮框文字样式
            color: '#000',
            fontSize: 12
          }

        },
        xAxis: {
          type: "category",
          data: longestTimeData, // 使用最长的时间数据
          name: "溶解时间/min",
          axisLabel: {
            formatter: function(value) {
              return parseFloat(value).toFixed(2); // 保留两位小数
            }
          }
        },
        yAxis: {
          type: "value",
          name: "铀浓度/(g·L^-1)",
        },
        legend: {},
        series: seriesData,
      };

      chartInstance.setOption(option);
    });

    return {
      chart,
    };
  },
};
</script>

<style>
/* 添加你的样式 */
</style>
